'use strict';

import React from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';

import RecommendedStar from './RecommendedStar';
import RoomEatPlay from './RoomEatPlay';
import Toast from '../Utils/toast';
import InitiatedQuestion from '../Pages/InitiatedQuestion';
import InitiatedWithTour from '../Pages/InitiatedWithTour';
import Global from '../Commom/GlobalConst';
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
import RegisteredContainer from '../Containers/RegisteredContainer';
const styles = StyleSheet.create({
    container: {
        padding: 10,
        flexDirection: 'row',
        backgroundColor: 'white',
        alignItems: 'stretch',
        zIndex: 1,
        height: 120,
    },
    bottomLine: {
        flex: 3,
        borderRightColor: '#F2F3F5',
        borderRightWidth: 1,
        justifyContent: 'space-around'
    },
    flexRow: {
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
    },
    typeText: {
        fontSize: 12,
        color: Global.FontColor.LightGrey,
    },
    btnBox: {
        marginTop: 5,
        borderRadius: 5,
        backgroundColor: '#38D68B',
        width: 60,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    button: {
        color: 'white',
    },
    rightBox: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 5,
    },
    collectBox: {
        marginTop: 5,
        flexDirection: 'row',
        alignItems: 'center'
    },
    collectIcon: {
        width: 20,
        height: 20,
        marginRight: 5
    },
    collectText: {
        color: Global.FontColor.LightGrey,
        marginLeft: 3
    }
});


class InfoTypeView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            is_collect: '0',
            been_to: '0',
            map: [],
            id: 0,
        };
    }

    componentDidMount() {
        this.setState({
            is_collect: this.props.is_collect,
            map: this.props.map,
            been_to: this.props.been_to,
            id: this.props.id,
            type: this.props.type,
        });
    }


    collectionPress() {
        console.log(Global.Const.token);
        console.log(Global.Const.registeredId);
        console.log(this.state.id);
        if (Global.Const.token == '') {
            // Toast.show('请先登录！');
            this.props.navigator.push({
                id: 'RegisteredContainer',
                component: RegisteredContainer,
                passProps: {},
            });
            return;
        }
        if (this.state.type == 0) {
            RuralLibraryAPIService.collection(Global.Const.token, Global.Const.registeredId, this.state.id).then((ret)=> {
                if (this.state.is_collect == '0') {
                    this.setState({
                        is_collect: '1',
                    });
                } else {
                    this.setState({
                        is_collect: '0',
                    });
                }
            }).catch((err)=> {

            });
        } else if (this.state.type == 1) {
            RuralLibraryAPIService.amuse_collection(Global.Const.token, Global.Const.registeredId, this.state.id).then((ret)=> {
                if (this.state.is_collect == '0') {
                    this.setState({
                        is_collect: '1',
                    });
                } else {
                    this.setState({
                        is_collect: '0',
                    });
                }
            }).catch((err)=> {

            });
        } else if (this.state.type == 2) {

        } else if (this.state.type == 3) {

        } else {

        }
    }

    render() {
        let {
            introduce,
        } = this.props;
        let collectImg = this.state.is_collect == '1' ? require('../../Image/collect_icon.png') : require('../../Image/un_collect_icon.png');
        return (
            <View style={styles.container}>
                <View style={styles.bottomLine}>
                    <RecommendedStar num={introduce.star}/>
                    <View style={styles.flexRow}>
                        {
                            Object.prototype.toString.call(introduce.typeText) == '[object Array]' ?
                                <RoomEatPlay typeText={introduce.typeText}/>
                                :
                                <Text numberOfLines={1} style={{
                                    fontSize: 18,
                                    flex: 1,
                                    color: Global.FontColor.DarkGray,
                                }}>{introduce.typeText}</Text>
                        }
                    </View>
                    <View style={styles.flexRow}>
                        {
                            this.state.map.map((item, index) => {
                                return (
                                    <View key={"type" + index} style={{
                                        backgroundColor: "#F2F3F5",
                                        borderRadius: 5,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginRight: 5,
                                        padding: 5,
                                        height: 25,
                                    }}>
                                        <Text style={styles.typeText}>{item}</Text>
                                    </View>
                                )
                            })
                        }
                    </View>
                </View>
                <View style={styles.rightBox}>
                    <TouchableOpacity onPress={() => this.collectionPress()}>
                        <View style={styles.collectBox}>
                            <Image source={collectImg}
                                   style={styles.collectIcon} resizeMode={'contain'}/>
                            <Text style={styles.collectText}>想去</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{flexDirection:'row',marginTop:18}}>
                        <Text style={{color:'red'}}>{this.state.been_to}</Text>
                        <Text style={{color:Global.FontColor.LightGrey}}> 人去过</Text>
                    </View>

                </View>
            </View>
        )
    }
}

export default InfoTypeView;